<!--
* @description 常住外地
!-->

<!-- 单页面需要多个上传组件 -->
<template>
	<div>
		<el-dialog :title="'感知设备详情'" width='70%' :visible.sync="dialogFormVisible">
			<div>
				<div class="button1">基本信息</div>
				<div class="wrap">
					<div>问题编号：20250310-001</div>
					<div>上报时间：2025年3月10日 16:30</div>
					<div>设施名称：XX污水处理厂（后台获取）</div>
					<div>责任单位：（后台获取）</div>
					<div>施工单位：（后台获取）</div>
					<div>传感器类型：水位传感器（对应传感器类型）</div>
					<div>问题描述：井盖堵塞，水位异常上升</div>
					<div>问题类型：堵塞</div>
					<div>到场时间：2025年3月13 18:32</div>
					<div>所处状态：施工中</div>

				</div>
				<div class="flex-row" style="margin-top:0.1rem">
					<div style="margin-right:0.1rem">
						<div class="button1">处置流程1</div>
						<div class="wrap">
							<div>2025.3.10 13:32 通过水位传感器（对应传感器类型）巡检上报

							</div>
							<div>2025.3.12 施工单位（后台获取）响应隐患

							</div>
							<div>2025.3.13 施工单位（后台获取）到场开始施工
							</div>
							<div>2025.3.15 施工单位（后台获取）申请夜间作业手续

							</div>
							<div>2025.3.17 住建委通过夜间作业手续

							</div>
							<div>
								2025.3.20 施工单位（后台获取）调取解决方案和设计图开始

							</div>
							<div>
								2025.3.26 施工单位（后台获取）施工完成，申请竣工验收

							</div>
							<div>
								2025.3.28 施工单位（后台获取）上传竣工验收材料

							</div>
						</div>
					</div>
					<!-- <div>
						<div class="button1">处置流程2</div>
						<div class="wrap">
							<div>2025.1.1 13:32 张二巡检上报xxxxxxxxxxxx
							</div>
							<div>2025.1.1 施工单位响应 隐患
							</div>
							<div>2025.1.1 施工单位到场开始施工
							</div>
							<div>2025.1.1 张三申请夜间作业手续
							</div>
							<div>2025.1.1 李四通过夜间作业手续
							</div>
							<div>
								2025.1.1 张一调取解决方案和设计图开始
							</div>
						</div>
					</div> -->
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<!-- <el-button type="primary" @click="confirm()">确 定</el-button>
				<el-button @click="dialogFormVisible = false">取 消</el-button> -->
			</div>
		</el-dialog>
		<!-- <detailComp :title="'家庭成员'" ref="updateComp"></detailComp> -->
		<secondPage ref="secondPage"></secondPage>
	</div>
</template>
<script>
import detailComp from './detail.vue';

import secondPage from '@/components/common/dataScreen/sub/secondPage';
export default {
	name: 'page',
	components: {
		detailComp,
		secondPage,
	},
	props: {
		apiName_params: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			buttonIndex: 1,
			tableData: [{}, {}, {}, {}],
			headerList: [],
			searchList: {
				// current: 1,
				// size: 7,
			},
			inputModel: {},
			infoList: {},
			dialogFormVisible: false,
			dataRow: '',
		};
	},
	created() {},
	methods: {
		secondPageShow(type, area) {
			this.$refs.secondPage.show();
			var params = this.dataParams;
			params.type = type;
			params.area = area;
			setTimeout(() => {
				this.$refs.secondPage.initData(params);
			}, 0);
		},
		hide: function () {
			// this.$emit("refresh");
		},
		detailShow: function (row) {
			const inputModel = row;
			this.$refs.updateComp.show();
			setTimeout(() => {
				this.$refs.updateComp.initData({
					inputModel: inputModel,
				});
			}, 0);
		},
		confirm() {
			this.$emit('saveFn', this.inputModel);
			this.hide();
		},
		/**
		 * 初始化数据
		 */
		initData: function (dataParams) {
			this.tableData = dataParams;
			console.log(11, dataParams);
		},
		show: function (type, id) {
			this.dialogFormVisible = true;
			// this.clearData();
			// this.$emit('hide');
		},
		/**
		 * 关闭弹出框
		 */
		hide: function () {
			// this.clearData();
			this.dialogFormVisible = false;
		},
		//增加搜索条件
		addSearchCriteria(key, value) {
			this.searchList[key] = value;
			console.log(this.searchList);
		},
		tableSelect(val) {
			this.inputModel = val;
		},
		//分页选择每页多少条
		handleSizeChange(val) {
			this.searchList.size = val;
			this.getData();
		},
		//分页当前页
		handleCurrentChange(val) {
			this.searchList.current = val;
			this.getData();
		},
		getData(current) {
			var apiName = 'findList_data_test';

			var params = this.searchList;
			this.$myApi[apiName](params).then((res) => {
				if (res.code == 200) {
					this.tableData = res.data;
				}
			});
		},
	},
};
</script>
<style  scoped>
.wrap {
	background: RGBA(69, 89, 105, 1);
	font-size: 0.12rem;
	color: #ffffff;
	padding: 0.1rem 0.2rem;
	margin-top: 0.1rem;
}
.button1 {
	background: linear-gradient(180deg, #06455e 0%, #0faad5 100%);
	background-repeat: no-repeat;

	position: relative;
	padding: 0.1rem 0.3rem;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 0.12rem;
	color: #ffffff;
	display: inline-block;
}
.button2 {
	background: RGBA(69, 89, 105, 1);
	/* height: 0.27rem; */
	/* width: 2rem; */
	position: relative;
	padding: 0.1rem 0.3rem;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 0.12rem;
	color: #ffffff;
	display: inline-block;
}
/deep/ .el-dialog__header {
	padding: 20px 20px 10px;
	background: #2d4d7d;

	color: #fff;
}
/deep/ .el-dialog__title {
	color: #fff;
}
/deep/ .el-dialog {
	color: #fff;
	background: #273d6a;
}
/deep/ .el-table__row {
	color: #fff;
	background: #273d6a;
}
/deep/ .el-table__empty-block {
	color: #fff;
	background: #273d6a;
}
/deep/ .el-table th.el-table__cell {
	color: #fff;
	background: #273d6a;
}
</style>
<style>
</style>
